<template>
  <view>
    <view class="custom-tab-bar">
      <view :class="type == '1' ? 'menu01' : 'menu02'" @tap="changetype" id="1">
        <text>订单</text>
      </view>
      <view :class="type == '2' ? 'menu01' : 'menu02'" @tap="changetype" id="2">
        <text>核销统计</text>
      </view>
    </view>

    <view class="bjs">
      <block v-if="type == '1'">
        <view class="menu">
          <view :class="type1 == '1' ? 'menu01' : 'menu02'" @tap="changetype1" id="1">
            <text>新订单</text>
          </view>
          <view :class="type1 == '2' ? 'menu01' : 'menu02'" @tap="changetype1" id="2">
            <text>已接单</text>
          </view>
        </view>
        <block v-if="type1 == '1'">
          <view class="kk" v-if="scleaninglist.length>0" v-for="(item, index) in scleaninglist" :key="index">
            <view class="kk1">
              <view class="bj_tx">
                <image style="width: 100%;height: 100%" :src="item.snapshoot.cover"></image>
              </view>
              <view>{{ item.snapshoot.name }}</view>
            </view>

            <view class="kk2">
              <view>订单时间：</view>
              <view class="riqi">{{
                  moment(item.start_time * 1000).format("YYYY-MM-DD HH:mm:ss")
                }}-{{ moment(item.end_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
              </view>
            </view>

            <view class="kk2">
              <view>订单号：</view>
              <view class="kk2_1">
                <view class="riqi">{{ item.order_no }}</view>
                <view class="fuzhi" @tap="copyone(item.order_no)">复制</view>
              </view>
            </view>

            <view class="kk2">
              <view>茶室地址：</view>
              <view class="riqi">{{ item.snapshoot.address }}</view>
            </view>

            <view class="qiangdan" @tap="mcleaninghandle(item.id)">
              <view class="qiangdan_kk">
                <view>抢单</view>
              </view>
            </view>
          </view>
        </block>

        <block v-if="type1 == '2'">
          <view class="kk" v-for="(item, index) in scleandlist" :key="index">
            <view class="kk1">
              <view class="bj_tx">
                <image style="width: 100%;height: 100%" :src="item.snapshoot.cover"></image>
              </view>
              <view>{{ item.snapshoot.name }}</view>
            </view>

            <view class="kk2">
              <view>订单时间：</view>
              <view class="riqi">{{
                  moment(item.start_time * 1000).format("YYYY-MM-DD HH:mm:ss")
                }}-{{ moment(item.end_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
              </view>
            </view>

            <view class="kk2">
              <view>订单号：</view>
              <view class="kk2_1">
                <view class="riqi">{{ item.order_no }}</view>
                <view class="fuzhi" @tap="copyone(item.order_no)">复制</view>
              </view>
            </view>

            <view class="kk2">
              <view>茶室地址：</view>
              <view class="riqi">{{ item.snapshoot.address }}</view>
            </view>

            <view class="qiangdan">
              <view class="qiangdan_kk2">
                <view>抢单时间：</view>
                <view>{{ item.cleaning_time }}</view>
              </view>
            </view>
            <view class="qiangdan2" v-if="item.status==4">
              <view class="qiangdan_kk3">
                <view>完成时间：</view>
                <view>{{ item.finish_time }}</view>
              </view>
            </view>
            <view class="yijiedan" v-else>
              <view class="kaimen" @tap="opendoor(item.id,item.order_no)">
                <view>开大门</view>
              </view>
              <view class="kaimen" @tap="openbx(item.id,item.order_no)">
                <view>开包厢</view>
              </view>
              <view class="kaideng" @tap="openlight(item.id)">
                <view>开灯</view>
              </view>
              <view class="wancheng" @tap="overclean(item.id)">
                <view>保洁完成</view>
              </view>
            </view>
          </view>
        </block>

        <!--        <block v-if="type1 == '2' " v-for="(dan, index) in dan" :key="index">-->
        <!--          <view class="kk">-->
        <!--            <view class="kk1">-->
        <!--              <view class="bj_tx"></view>-->
        <!--              <view>{{ dan.name }}</view>-->
        <!--            </view>-->

        <!--            <view class="kk2">-->
        <!--              <view>订单时间：</view>-->
        <!--              <view class="riqi">{{ dan.shijian }}</view>-->
        <!--            </view>-->

        <!--            <view class="kk2">-->
        <!--              <view>订单号：</view>-->
        <!--              <view class="kk2_1">-->
        <!--                <view class="riqi">{{ dan.danhao }}</view>-->
        <!--                <view class="fuzhi">复制</view>-->
        <!--              </view>-->
        <!--            </view>-->

        <!--            <view class="kk2">-->
        <!--              <view>茶室地址：</view>-->
        <!--              <view class="riqi">{{ dan.dizhi }}</view>-->
        <!--            </view>-->

        <!--            <view class="qiangdan">-->
        <!--              <view class="qiangdan_kk2">-->
        <!--                <view>抢单时间：</view>-->
        <!--                <view>{{ dan.qdsj }}</view>-->
        <!--              </view>-->
        <!--            </view>-->
        <!--            <view class="qiangdan2">-->
        <!--              <view class="qiangdan_kk3">-->
        <!--                <view>完成时间：</view>-->
        <!--                <view>{{ dan.wcsj }}</view>-->
        <!--              </view>-->
        <!--            </view>-->
        <!--          </view>-->
        <!--        </block>-->
      </block>

      <block v-if="type == '2'">
        <view class="menu">
          <view :class="type3 == '1' ? 'menu012' : 'menu022'" @tap="changetype2" id="1">
            <text>累计</text>
          </view>
          <view :class="type3 == '2' ? 'menu012' : 'menu022'" @tap="changetype2" id="2">
            <text>今日</text>
          </view>
          <view :class="type3 == '3' ? 'menu012' : 'menu022'" @tap="changetype2" id="3">
            <text>昨日</text>
          </view>
          <view :class="type3 == '4' ? 'menu012' : 'menu022'" @tap="changetype2" id="4">
            <text>7天</text>
          </view>
          <view :class="type3 == '5' ? 'menu012' : 'menu022'" @tap="changetype2" id="5">
            <text>30天</text>
          </view>
        </view>

        <block>
          <view class="dingdanshu">
            <view class="dds">
              <view class="text">{{ cleaningstatisticsd }}</view>
              <view>保洁订单数</view>
            </view>
          </view>
        </block>

        <!--        <block v-if="type3 == '2'">-->
        <!--          <view class="dingdanshu">-->
        <!--            <view class="dds">-->
        <!--              <view class="text">1</view>-->
        <!--              <view>保洁订单数</view>-->
        <!--            </view>-->
        <!--          </view>-->
        <!--        </block>-->

        <!--        <block v-if="type3 == '3'">-->
        <!--          <view class="dingdanshu">-->
        <!--            <view class="dds">-->
        <!--              <view class="text">2</view>-->
        <!--              <view>保洁订单数</view>-->
        <!--            </view>-->
        <!--          </view>-->
        <!--        </block>-->

        <!--        <block v-if="type3 == '4'">-->
        <!--          <view class="dingdanshu">-->
        <!--            <view class="dds">-->
        <!--              <view class="text">3</view>-->
        <!--              <view>保洁订单数</view>-->
        <!--            </view>-->
        <!--          </view>-->
        <!--        </block>-->

        <!--        <block v-if="type3 == '5'">-->
        <!--          <view class="dingdanshu">-->
        <!--            <view class="dds">-->
        <!--              <view class="text">4</view>-->
        <!--              <view>保洁订单数</view>-->
        <!--            </view>-->
        <!--          </view>-->
        <!--        </block>-->
      </block>
    </view>
  </view>
</template>

<script>
// pages/baojie/baojie.js
import {
  cleancontrollerElectricity,
  cleancontrollerOpenDoor,
  cleaninghandle,
  cleaninglist, cleaningstatistics,
  overcontrollerElectricity
} from "@/common/api";
import moment from "moment";

export default {
  computed: {
    moment() {
      return moment
    }
  },
  data() {
    return {
      type: '1',
      type1: '1',
      tpye3: '1',
      scleaninglist: [],
      scleandlist: [],

      type3: '1',
      cleaningstatisticsd: 0
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getcleaninglist()
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    mcleaningstatistics(status) {
      cleaningstatistics({
        status: status,
        type: 1
      }, res => {
        if (res.data.code == 0) {
          this.cleaningstatisticsd = res.data.data.count
        }
      })
    },
    opendoor(order_id, order_no) {
      uni.showLoading({
        title: '操作中...'
      });
      cleancontrollerOpenDoor({
        order_id: order_id,
        order_no: order_no,
        onclick: 1
      }, res => {
        if (res.data.code == 0) {
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
          this.getcleandlist();
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
        }
      })
    },
    openbx(order_id, order_no) {
      uni.showLoading({
        title: '操作中...'
      });
      cleancontrollerOpenDoor({
        order_id: order_id,
        order_no: order_no,
        onclick: 2
      }, res => {
        if (res.data.code == 0) {
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
          this.getcleandlist();
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
        }
      })
    },
    openlight(order_id) {
      uni.showLoading({
        title: '操作中...'
      });
      cleancontrollerElectricity({
        order_id: order_id,
        status: 1
      }, res => {
        if (res.data.code == 0) {
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
          this.getcleandlist();
        }
      })
    },
    overclean(order_id) {
      uni.showLoading({
        title: '操作中...'
      });
      overcontrollerElectricity({
        order_id: order_id,
        onclick: 0
      }, res => {
        if (res.data.code == 0) {
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
          this.getcleandlist();
        }
      })
    },
    copyone: function (copydata) {
      uni.setClipboardData({
        data: copydata, // e是你要保存的内容
        success: function () {
          uni.showToast({
            title: '复制成功',
            duration: 2000,
            mask: true // 设置为true，使背景半透明
          })
        }
      })
    },
    getcleaninglist() {
      cleaninglist({
        status: 0
      }, res => {
        if (res.data.code == 0) {
          this.scleaninglist = res.data.data
        }
      })
    },
    getcleandlist() {
      cleaninglist({
        status: 1
      }, res => {
        uni.hideLoading();
        if (res.data.code == 0) {
          this.scleandlist = res.data.data
        }
      })
    },
    //抢单
    mcleaninghandle(order_id) {
      cleaninghandle({
        order_id: order_id,
        type: 1
      }, res => {
        if (res.data.code == 0) {
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
          this.getcleaninglist();
        }
      })
    },
    changetype: function (option) {
      var that = this;
      var type = option.currentTarget.id;
      if (type == 1) {
        this.getcleaninglist()
        this.getcleandlist()
      } else {
        this.mcleaningstatistics(this.type3)
      }
      that.setData({
        type: type
      });
      uni.showLoading({
        title: '加载中...'
      });
      uni.hideLoading();
    },

    changetype1: function (option) {
      var that = this;
      var type1 = option.currentTarget.id;
      that.setData({
        type1: type1
      });
      uni.showLoading({
        title: '加载中...'
      });
      uni.hideLoading();
      if (type1 == 1) {
        this.getcleaninglist()
      } else {
        this.getcleandlist()
      }
    },

    changetype2: function (option) {
      var that = this;

      var type3 = option.currentTarget.id;
      this.mcleaningstatistics(type3)
      that.setData({
        type3: type3
      });
      uni.showLoading({
        title: '加载中...'
      });
      uni.hideLoading();
    }
  }
};
</script>
<style>
.menu {
  width: 100%;
  height: auto;
  overflow: hidden;
  top: 0;
}

.menu01 {
  width: 50%;
  line-height: 80rpx;
  font-size: 32rpx;
  text-align: center;
  float: left;
  color: #ff4800;
  border-bottom: 2px solid #ff4800;
}

.menu02 {
  width: 50%;
  line-height: 90rpx;
  font-size: 32rpx;
  text-align: center;
  float: left;
  color: #666666;
}

.menu012 {
  width: 20%;
  line-height: 80rpx;
  font-size: 32rpx;
  text-align: center;
  float: left;
  color: #ff4800;
  border-bottom: 2px solid #ff4800;
}

.menu022 {
  width: 20%;
  line-height: 90rpx;
  font-size: 32rpx;
  text-align: center;
  float: left;
  color: #666666;
}

.bjs {
  background-color: rgb(236, 236, 236);
  padding: 20rpx;
  padding-bottom: 80px;

}

.kk {
  background-color: rgb(255, 255, 255);
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.kk1 {
  display: flex;
  font-weight: bold;
  font-size: 25rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid rgb(228, 228, 228);
  align-items: center;
}

.kk2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15rpx;
  margin-bottom: 15rpx;
  font-size: 25rpx;
  color: rgb(155, 154, 154);
  margin-bottom: 20rpx;
}

.kk2_1 {
  display: flex;
}

.bj_tx {
  width: 40rpx;
  height: 40rpx;
  background-color: aqua;
  margin-right: 10rpx;
}

.riqi {
  color: #000;
  font-weight: bold;
}

.fuzhi {
  border: 1rpx solid rgb(224, 224, 224);
  font-size: 23rpx;
  padding: 3rpx 5rpx;
  border-radius: 5rpx;
  margin-left: 10rpx;
}

.qiangdan {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1rpx solid rgb(228, 228, 228);
  padding-top: 20rpx;
}

.qiangdan2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20rpx;
}

.qiangdan_kk {
  color: rgb(255, 255, 255);
  font-size: 25rpx;
  background-color: rgb(72, 192, 172);
  padding: 5rpx 25rpx;
  border-radius: 7rpx;
}

.qiangdan_kk2 {
  display: flex;
  color: #000;
  font-weight: bold;
  font-size: 25rpx;
}

.qiangdan_kk3 {
  display: flex;
  color: #000;
  font-weight: bold;
  font-size: 25rpx;
}

.yijiedan {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10rpx;
  font-size: 26rpx;
}

.kaimen {
  width: 160rpx;
  background-color: darkcyan;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rpx 0;
  color: rgb(255, 255, 255);
  border-radius: 5rpx;
}

.kaideng {
  width: 160rpx;
  background-color: rgb(26, 189, 26);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rpx 0;
  color: rgb(255, 255, 255);
  border-radius: 5rpx;
}

.wancheng {
  width: 160rpx;
  background-color: rgba(255, 217, 0, 0.89);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rpx 0;
  color: rgb(78, 78, 78);
  border-radius: 5rpx;
}

.custom-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #eee;
  margin-bottom: 20rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 14px;
  padding: 20rpx 0;
}

.dingdanshu {
  height: 200rpx;
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10rpx;
  border-radius: 10rpx;
}

.dds {
  text-align: center;
}

.text {
  color: rgb(27, 126, 219);
  font-weight: bold;
  font-size: 40rpx;
}
</style>
